<template>
  <div class="page max-limit">
    <div>
      <group>
        <x-input title="分配比例" v-model="distributeConfig.max_list_count" text-align="right"></x-input>
      </group>
      <span class="btn scrm-default-btn save-btn" @click="$saveCounselorDistributeConfig()">保存</span>
    </div>
    <x-dialog v-model="show" :hide-on-blur="true">
      <div class="popupTips">{{ msg }}</div>
    </x-dialog>
  </div>
</template>
<script>
  import Group from 'vux/src/components/group'
  import XInput from 'vux/src/components/x-input'
  import XDialog from 'vux/src/components/x-dialog'
  import { mapActions, mapState } from 'vuex'

  export default {
    components: {
      Group,
      XInput,
      XDialog
    },
    methods: {
      initSaveBtn () {
        let items = [
          {
            'id': 'savedistributeConfig', // 字符串
            'text': '保存'
          }
        ]

        const dd = window['dd']
        // dd.biz.navigation.setMenu({
        //   backgroundColor: '#FFFFFF',
        //   textColor: '#0089cd',
        //   items: items,
        //   onSuccess: (data) => {
        //     // this.checkedClients
        //     this.$saveCounselorDistributeConfig()
        //   },
        //   onFail: function () { }
        // })
      },
      $saveCounselorDistributeConfig () {
        this.saveCounselorDistributeConfig(Object.assign(this.distributeConfig, {team_id: this.teamId}))
        .then((response) => {
          if (response.data.errcode === 0) {
            this.show = true
            this.msg = '设置成功!'
            setTimeout(() => {
              this.show = false
              this.$router.back()
            }, 2000)
          } else {
            this.show = true
            this.msg = response.data.errmsg
            setTimeout(() => {
              this.show = false
            }, 5000)
          }
        }).catch((response) => {
          this.show = false
        })
      },
      ...mapActions({
        'saveCounselorDistributeConfig': 'saveCounselorDistributeConfig'
      })
    },
    watch: {
      show (value) {
        if (value === false) {
          this.msg = ''
        }
      }
    },
    computed: {
      ...mapState({
        team: state => state.app.user.teams ? state.app.user.teams[0] : []
      })
    },
    mounted () {
      this.teamId = this.$route.query.team_id
      this['distributeConfig'] = this.$route.query
      this.initSaveBtn()
    },
    data () {
      return {
        teamId: '',
        distributeConfig: {},
        show: false,
        msg: ''
      }
    }
  }
</script>
<style lang="less">
@import "../less/base";
.max-limit {
  .save-btn {
    width: 88%;
    max-width: 320px;
    margin: 20px auto;
  }
}
</style>
